<template>
  <el-date-picker v-model="value" type="datetimerange" unlink-panels range-separator="至" start-placeholder="开始时间"
    end-placeholder="结束时间" :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss" @change="selectChange" />
</template>

<script setup>
const props = defineProps({
  time: Array,
})
const emit = defineEmits(["update:time"]);
const value = computed({
  get () {
    return props.time
  },
  set (value) {
    emit("update:time", value)
  }
})
const selectChange = (arr) => {
  emit("update:time", arr);
};
const shortcuts = [
  {
    text: "今日",
    value: () => {
      const time = new Date();
      return [time, time];
    },
  },
  {
    text: "昨天",
    value: () => {
      const time = new Date();
      time.setTime(time.getTime() - 3600 * 1000 * 24);
      return [time, time];
    },
  },
  {
    text: "近七天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
      return [start, end];
    },
  },
  {
    text: "本月",
    value: () => {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      const start = new Date(year, month, 1);
      const end = new Date(year, month + 1, 0);
      return [start, end];
    },
  },
  {
    text: "上月",
    value: () => {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      const start = new Date(year, month - 1, 1);
      const end = new Date(year, month, 0);
      return [start, end];
    },
  },
];
onMounted(() => {
});
</script>

<style></style>